import React, { useState } from "react";
import { Button, Checkbox } from "react-vant";
import axios from 'axios'
const Index: React.FC = () => {
  const [data, setData] = useState({
    id: 1,
    price: 1000,
    title: "一次还清",
  });
  const tabs = [
    {
      id: 1,
      price: 1000,
      title: "一次还清",
    },
    {
      id: 2,

      price: 200,
      title: "分五次还清, 利息：4.00",
    },
    {
      id: 3,
      price: 100,
      title: "分10次还清， 利息12.00",
    },
  ];

  const pay = async () => {
    const resp = await axios.post('/api/pay', data);
    window.location.href = resp.data.data
  }
  return (
    <div>
      <div>
        {tabs.map((v) => {
          return (
            <div key={v.id} className="item" onClick={() => setData(v)}>
              <Checkbox checked={v.id === data.id}></Checkbox>
              <div>
                <h3>{v.price}</h3>
                <p>{v.title}</p>
              </div>
            </div>
          );
        })}
      </div>
      <Button type="primary" block style={{ position: "fixed", bottom: 0 }} onClick={ () => pay()}>
        付款
      </Button>
    </div>
  );
};

export default Index;
